<template>
  <div class="forms-container">
    <el-form :model="killForm" ref="killForm" @submit.native.prevent="fridaysubmitForm" class="form">
      <h2>周五秒杀</h2>
      <el-form-item label="sid:">
        <el-input v-model="killForm.fsid" name="fsid"></el-input>
      </el-form-item>
      <el-form-item label="exchId:">
        <el-input v-model="killForm.exchId" name="exchId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="hidden" v-model="killForm.timestamp" name="timestamp"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>

    <el-form :model="listForm" ref="listForm" @submit.native.prevent="listSubmit" class="form">
      <h2>周五秒杀列表</h2>
      <el-form-item label="sid:">
        <el-input v-model="listForm.sid" name="sid"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-form :model="testForm" ref="testForm" @submit.native.prevent="testSubmit" class="form">
      <h2>周五秒杀预热</h2>
      <el-form-item>
        <el-button type="primary" native-type="submit">预热</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>import axios from '@/server/axios.js';

export default {
  name: 'FridayKill',
  data() {
    return {
      killForm: {
        fsid: '',
        exchId: '',
        timestamp: ''
      },
      listForm: {
        sid: ''
      },
      testForm: {}
    };
  },
  methods: {
    fridaysubmitForm() {
      const submitButton = this.$refs.killForm.$el.querySelector('button[type="submit"]');
      submitButton.innerText = '已提交';
      submitButton.disabled = true;
      this.killForm.timestamp = this.getCurrentTimestamp();

      axios.post('/api/friday/kill', this.killForm)
          .then(response => {
            console.log('提交成功:', response.data);
            // 处理成功响应
          })
          .catch(error => {
            console.error('提交失败:', error);
            // 处理错误
            submitButton.innerText = '提交';
            submitButton.disabled = false;
          });
    },
    listSubmit() {
      axios.post('/friday/list', this.listForm)
          .then(response => {
            console.log('查询成功:', response.data);
            // 处理成功响应
          })
          .catch(error => {
            console.error('查询失败:', error);
            // 处理错误
          });
    },
    testSubmit() {
      axios.post('/friday/killTest', this.testForm)
          .then(response => {
            console.log('预热成功:', response.data);
            // 处理成功响应
          })
          .catch(error => {
            console.error('预热失败:', error);
            // 处理错误
          });
    },
    getCurrentTimestamp() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      const milliseconds = String(now.getMilliseconds()).padStart(3, '0');
      const microseconds = String(Math.floor((now.getMilliseconds() % 1) * 1000)).padStart(3, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}${microseconds}`;
    }
  }
};
</script>

<style scoped>.forms-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #333;
}

.form .input-field {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}

.form .submit-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form .submit-button:hover {
  background-color: #0056b3;
}
</style>